<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Image</title>
    <script src="./lib/config.js"></script>
    <script src="../dist/quark-renderer.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <div id="main" style="width:1000px;height:800px;"></div>
    <script type="text/javascript">
        // 初始化qrenderer
        var qr = QuarkRenderer.init(document.getElementById('main'), {
            renderer: window.__QRENDER__DEFAULT__RENDERER__ || 'svg'
        });

        var gradient1 = new QuarkRenderer.LinearGradient();
        gradient1.addColorStop(0, 'red');
        gradient1.addColorStop(0.7, 'rgb(255, 255, 0)');
        gradient1.addColorStop(1, '#0f0');

        var rect = new QuarkRenderer.Rect({
            shape: {
                x: 10,
                y: 10,
                width: 80,
                height: 80
            },
            style: {
                fill: gradient1
            }
        });
        qr.add(rect);

        setTimeout(function () {
            rect.style.fill = {
                type: 'linear',
                x: 0,
                x2: 1,
                y: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#00f'
                }, {
                    offset: 1,
                    color: '#f0f'
                }]
            };
            rect.dirty();
        }, 8000);

        setTimeout(function () {
            gradient1.colorStops[0].color = '#f0f';
            rect.dirty();
        }, 1000);

        setTimeout(function () {
            qr.remove(rect);
        }, 3000);

        setTimeout(function () {
            qr.add(rect);
        }, 5000);

        var gradient2 = new QuarkRenderer.LinearGradient();
        gradient2.addColorStop(0, 'blue');
        gradient2.addColorStop(1, 'yellow');
        gradient2.x2 = 0;
        gradient2.y2 = 1;

        var circle = new QuarkRenderer.Circle({
            shape: {
                cx: 150,
                cy: 50,
                r: 40
            },
            style: {
                fill: gradient2
            }
        });
        qr.add(circle);

        setTimeout(function () {
            qr.remove(circle);
        }, 2000);

        setTimeout(function () {
            qr.add(circle);
        }, 4000);

        var ring = new QuarkRenderer.Ring({
            shape: {
                cx: 250,
                cy: 50,
                r: 40,
                r0: 30
            },
            style: {
                fill: gradient1
            }
        });
        qr.add(ring);

        setTimeout(function () {
            qr.remove(ring);
        }, 4000);

        setTimeout(function () {
            qr.add(ring);
        }, 6000);

        var sector = new QuarkRenderer.Sector({
            shape: {
                cx: 350,
                cy: 50,
                r: 40,
                r0: 30,
                startAngle: Math.PI / 6,
                endAngle: Math.PI
            }
        });
        qr.add(sector);

        var gradient3 = new QuarkRenderer.RadialGradient();
        gradient3.addColorStop(0, 'red');
        gradient3.addColorStop(1, 'green');

        var drop = new QuarkRenderer.Droplet({
            shape: {
                cx: 350,
                cy: 50,
                width: 20,
                height: 30
            },
            style: {
                fill: gradient3
            }
        });
        qr.add(drop);

        var curve = new QuarkRenderer.BezierCurve({
            shape: {
                x1: 400,
                y1: 0,
                x2: 500,
                y2: 100,
                cpx1: 450,
                cpy1: 0,
                cpx2: 500,
                cpy2: 50
            }
        });
        qr.add(curve);

        var ellipse = new QuarkRenderer.Ellipse({
            shape: {
                cx: 550,
                cy: 50,
                rx: 20,
                ry: 30
            }
        });
        qr.add(ellipse);

        var heart = new QuarkRenderer.Heart({
            shape: {
                cx: 650,
                cy: 25,
                width: 50,
                height: 60
            }
        });
        qr.add(heart);

        var rose = new QuarkRenderer.Rose({
            shape: {
                cx: 750,
                cy: 50,
                r: [50],
                k: 0.2,
                n: 5
            }
        });
        qr.add(rose);

        var trochoid = new QuarkRenderer.Trochoid({
            shape: {
                cx: 850,
                cy: 50,
                r: 30,
                r0: 5,
                d: 10
            }
        });
        qr.add(trochoid);

        var isogon = new QuarkRenderer.Isogon({
            shape: {
                x: 50,
                y: 150,
                r: 50,
                n: 7
            }
        });
        qr.add(isogon);

        var line = new QuarkRenderer.Line({
            shape: {
                x1: 100,
                y1: 100,
                x2: 200,
                y2: 200
            }
        });
        qr.add(line);

        var polygon = new QuarkRenderer.Polygon({
            shape: {
                points: [
                    [200, 100],
                    [200, 120],
                    [250, 150],
                    [280, 200],
                    [300, 100]
                ]
            }
        });
        qr.add(polygon);

        var polyline = new QuarkRenderer.Polyline({
            shape: {
                points: [
                    [300, 100],
                    [300, 120],
                    [350, 150],
                    [380, 200],
                    [400, 100]
                ]
            }
        });
        qr.add(polyline);

        var star = new QuarkRenderer.Star({
            shape: {
                cx: 450,
                cy: 150,
                n: 5,
                r0: 20,
                r: 50
            }
        });
        qr.add(star);
    </script>

</body>
</html>